<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <form id="userForm">
        <div>
            <label for="bookname">图书名称：</label>
            <input type="text" name="bookname" id="bookname" />
        </div>
        <div>
            <label for="author">图书作者：</label>
            <input type="text" name="author" id="author" />
        </div>
        <div>
            <label for="publisher">图书出版社：</label>
            <input type="text" name="publisher" id="publisher" />
        </div>
        <div>
            <input type="submit" value="提交" />
        </div>
    </form>
    <script type="text/javascript" src="./lib/jquery.js"></script>
    <script>
        $('#userForm').on('submit', function(e) {
            // 阻止表单的默认提交行为
            e.preventDefault();
            //第一种方法
            // var bookname = $('#bookname').val();
            // var author = $('#author').val();
            // var publisher = $('#publisher').val();
            // $.post(
            //     'http://www.liulongbin.top:3006/api/addbook', {
            //         bookname: bookname,
            //         author: author,
            //         publisher: publisher,
            //     },
            //     function(res) {
            //         console.log(res);
            //     }
            // );
            //第二种方法jQuery提供的serialize()
            var allData = $(this).serialize();
            // console.log(allData);
            $.post('http://www.liulongbin.top:3006/api/addbook', allData, function(
                res
            ) {
                console.log(res);
            });
        });
    </script>
</body>

</html>